<% extends "common/msui.html" %>
<% block title %>订单信息<% endblock %>
<% block body %>
<% set shopping_evaluation = _pool.get('sale.order').get_shopping_evaluations(order_id) %>
<% set messages = _pool.get('sale.order')._get_message_by_website(order_id) %>
<div class="page" id="order" ms-controller="order">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/mshop/products" >
      <span class="icon icon-left"></span>
      返回
    </a>
    <h1 class="title">订单信息</h1>
  </header>

  <div class="content order-content" >

    <div class='media-list list-block order-address' >
      <a ms-attr-href="/mshop/customer/address/choose?choose_id={{address.id}}&order_id={{order_id}}" class="item-link item-content order-address-content">
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title"><span>收货人：</span>{{address.name}}</div>
            <div class="item-after">{{address.phone}}</div>
          </div>
          <div class='item-text'><span>{{address.province}}{{address.city}}{{address.country}} {{address.street}}</span></div>
        </div>
      </a>
    </div>

    <div class="list-block media-list order-line">
      <ul>
        <li ms-repeat='order_line'>
          <a href="#" class="item-content order-line-content">
            <div class="item-media"><img ms-attr-src='/website/image/product.product/{{el.product_id}}/image' style='width: 4rem;'></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">{{el.product_name}}</div>
                <div class="item-after">
                  <div><span>¥{{el.price_unit}} </span></div>
                  <div><span>&nbsp;x {{el.product_qty}}</span></div>
                </div>
              </div>
              <div class="item-text">{{el.attribute}}</div>

              <div ms-visible="state == 'done'" class='item-evaluation-btn' ms-click='open_evaluation(el.id)'>评价</div>
            </div>
          </a>
          <hr />
        </li>
      </ul>
    </div>

    <div class='list-block order-note'>
      <div class='item-input' ><input type='text' placeholder='发送消息' autocomplete='off'/></div>
    </div>

    <div ms-if='shopping_evaluation' class='shopping-evaluation'>
        <div class='product-evaluation-header shopping-evaluation-header'><span>商家评价({{shopping_evaluation.length}})</span></div>
        <div ms-repeat='shopping_evaluation' class='shopping-evaluation-item'>
          <!-- 这个地方line_id其实没有任何用处，但是需要一个line_id必输，所以直接指定为1 -->
          <a ms-attr-href='/mshop/order/evaluation?line_id=1&evaluation_id={{el.id}}' >
            <div class='product-evaluation-image'>
                <img ms-attr-src='/website/image/res.partner/{{el.user_id}}/image' />
                <span>{{el.username}}</span>
            </div>
            <div class='product-evaluation-content'>
                <div class='product-evaluation-content-info'><span>{{el.description}}</span></div>
            </div>
          </a>
        </div>
    </div>

    <!-- <div class='message-timeline-header'>消息展示</div> -->
    <div class='message-timeline' >
      <ul>
        <li ms-repeat='messages'>
          <div class='message-timeline-left'>
            <div class='message-timeline-left-date'>{{el.date}}</div>
            <div class='message-timeline-left-user'>{{el.user}}</div>
          </div>
          <div class='message-timeline-right'>
            <span class='messages-item-icon' ms-class='messages-item-icon-admin:el.admin'></span>
            <div ms-html='el.message'></div>
          </div>
        </li>
      </ul>
    </div>

  </div>

  <div class='card mshop-tab-card' >
      <div class='card-content'>
        <div class='card-content-inner' style='padding-top:0px;padding-bottom:0px'>
          <div class='row'>
            <div class='col-30 pull-right mshop-clearing mshop-buy-now' ms-click='prepare_add_cart' style='font-size:14px;padding-left:8px;padding-right:8px' ms-visible="state == 'draft'" ><span>提交订单</span></div>

            <div class='col-70 pull-right mshop-right-clearing-word' ms-click='prepare_buy_now' ><span>共{{amount_qty}}件，总金额</span><span>￥{{amount_total}} (<span style='color:red'>{{invoice}}</span>)</span></div>
          </div>
        </div>
      </div>
  </div>

  <script type="application/javascript" >
    $(function() {

      var order_id = ${order_id|safe};
      var shopping_evaluation = ${shopping_evaluation | tojson | safe};
      var messages = ${messages | tojson | safe};

      $('div.order-note input').keyup(function(event) {
        if (event.keyCode === 13) {
          var noteInput = $('div.order-note input');
          var message = noteInput.val()
          noteInput.val('');

          send_message(message);
        };
      });

      var send_message = function(message) {
        if (message) {
          $.ajax({
            url: '/mshop/order/post_message',
            data: {order_id: order_vm.order_id, 'message': message},
            success: function(e) {
              order_vm.messages.unshift(JSON.parse(e));
              setTimeout(refresh_timeline, 0.1);
            },
            type: 'post',
            async: true,
          });
        }
      }

      var recompute_amount = function() {
        var _amount_qty = 0, _amount_total = 0;
        for (var i = 0; i < order_vm.order_line.length; i++) {
          _amount_qty += order_vm.order_line[i].product_qty;
          _amount_total += order_vm.order_line[i].product_qty * order_vm.order_line[i].price_unit;
        }

        order_vm.amount_qty = _amount_qty;
        order_vm.amount_total = _amount_total;
      };

      var sync_content = function() {
        var args = Array.prototype.slice.call(arguments)

        $.ajax({
          url: '/mshop/order/get',
          data: {args: JSON.stringify(args), order_id: order_id},
          type: 'GET',
          success: function(response) {
            var res = JSON.parse(response);
            for (var i = 0; i < args.length; i++) {
              order_vm[args[i]] = res[args[i]];
            };
            order_vm.partner_id = res.partner_id;
            order_vm.invoice = res.invoice;

            recompute_amount();
          },
          async: true,
        });
      };

      sync_content('address', 'order_line', 'note', 'state');

      var refresh_timeline = function() {
        var leftTimeline = $('.message-timeline-left')
        leftTimeline.forEach(function(line) {
          var timeLine = $(line);
          timeLine.css('left', -timeLine.width() - 10)
        });
      };

      setTimeout(refresh_timeline, 1);

      var order_vm = avalon.define({
        $id: 'order',
        order_id: order_id,
        state: '',
        address: {},
        order_line: [],
        shopping_evaluation: shopping_evaluation,
        note: '',
        invoice: '',
        partner_id: false,
        amount_qty: 0,
        amount_total: 0,
        messages: messages,
        open_evaluation: function(line_id) {
          $.router.loadPage('/mshop/order/evaluation?line_id=' + line_id);
        },
        prepare_add_cart: function() {
          $.ajax({
            url: '/mshop/order/confirm',
            data: {order_id: order_vm.order_id},
            success: function() {
              order_vm.state = 'confirmed'
              $.toast("订单提交成功");
            },
            async: true,
          })
        },
      });

      $(document).on('pageReinit', '#order', function(e, pageId, $page) {
        sync_content('address');
      });

      avalon.scan();
    });


  </script>

<% endblock %>
</div>